$(function () {
    Vue.component('left',{
        data: function(){
            return {
                data : [
                    { href:"http://localhost:3000/app_start/index.html",name:"App启动设置",child:[
                        {href:"#",name:"创建"}
                    ]},
                    {href:"#",name:"发现模块栏目定义",child:[
                        {href:"#",name:"栏目创建"},
                        {href:"#",name:"轮播图片编辑"},
                    ]},
                    {href:"http://localhost:3000/app_content/index.html",name:"内容管理",child:[
                        {href:"http://localhost:3000/app_content/release.html",name:"内容发布"}
                    ]},
                ],
                name: "内容管理"
            }
        },
        template: '<ul class="parent_ul">'+
                    '<li v-for="(index,list) in data">'+
                        '<span>' +
                            '<i v-on:click="iClass(index)"  class="caret down icon "></i>' +
                            '<a v-bind:href="list.href" v-bind:class="{active: name == list.name}">{{list.name}}</a></span>'+
                        '<ul class="child_ul">'+
                            '<li v-for="item in list.child">' +
                            '<a v-bind:href="item.href" v-bind:class="{active: name == item.name}">{{item.name}}</a></li>'+
                        '</ul>'+
                    '</li>'+
                    '</ul>',
        ready: function(){

        },
        methods: {
            iClass: function(index){
                var self =  window.event.target;
                var left = document.querySelector("#left").
                            querySelector(".parent_ul").querySelectorAll(".child_ul")[index].querySelectorAll("li");
                if(self.classList.contains("down")){
                    self.classList.remove("down");
                    self.classList.add("right");
                    [].forEach.call(left,function(item){
                        item.querySelector("a").style.lineHeight = "0px";
                    });
                } else {
                    self.classList.remove("right");
                    self.classList.add("down");
                    [].forEach.call(left,function(item){
                        item.querySelector("a").style.lineHeight = "45px";
                    });
                }
            }
        }
    });
    var left = new Vue({
        el : "#left",
        data : {
            test: "123"
        }
    })
});
